<template>
    <div class="changeLoaTime">
        <group title="原还款日">
            <x-input v-model="oldTime" :show-clear="false" disabled text-align="center"></x-input>
        </group>
        <group title="新还款日">
            <datetime v-model="time"  placeholder="选择日期" format="每月DD日" :compute-days-function="computeDaysFunction" day-row="每月{value}日" confirm-text="确定" cancel-text="取消"></datetime>
        </group>
        <div class="btn" @click="changeLoaTime()">
            <span>确定</span>
        </div>

    </div>
</template>

<script>
import { XInput, Group, Datetime } from "vux";
export default {
  components: {
    XInput,
    Group,
    Datetime
  },

  data() {
    return {
      oldTime: "",
      computeDaysFunction(options, generateRange) {
        let day = [];
        for (let i = 1; i <= 28; i++) {
          day.push(i);
        }
        return day;
      },
      time: ""
    };
  },
  methods: {
    changeLoaTime() {
      if (!this.time) {
        this.$vux.toast.text("请选择新还款日");
      } else {
        this.$router.push({
          path: "/select/time",
          query: { type: "ChangeDay", oldDay: this.oldTime, newDay: this.time }
        });
      }
    }
  },
  created() {
      this.oldTime = `每月${this.$route.query.payday}日`
  }
};
</script>

<style lang="less">
.changeLoaTime {
  .vux-datetime-value {
    text-align: center;
    span {
      color: #000;
    }
  }
}
</style>

